<template>
	<view>
		<view class="destLbg">
			<image src="../../static/indexBg3.jpg" mode=""></image>
		<view class="intr">
			<view class="name">
			   新加坡
			</view>
			<view class="area">
				<view class="plan">
					<i class="iconfont">&#xe698;</i>
					<text>7个行程</text>
				</view>
				<view class="play">
					<i class="iconfont">&#xe661;</i>
				<text>13个必玩</text>	
				</view>
			</view>
		</view>
		</view>
		<view class="reTitle">
			必玩推荐
		</view>
		<view class="reList">
			<view class="reBox" @click="openinfo('../destDetalis/destDetalis')">
				<image src="../../static/indexBg1.jpg" mode=""></image>
			 <view class="intro">
			 	圣淘沙名胜世界圣淘沙名胜世界
			 <view class="pos">
			 	新加坡
			 </view>
			 </view>
			</view>
			<view class="reBox">
				<image src="../../static/indexBg1.jpg" mode=""></image>
			 <view class="intro">
			 	新加坡摩天轮景观
			 <view class="pos">
			 	新加坡
			 </view>
			 </view>
			</view>
			<view class="reBox">
				<image src="../../static/indexBg1.jpg" mode=""></image>
			 <view class="intro">
			 	新加坡摩天轮景观
			 <view class="pos">
			 	新加坡
			 </view>
			 </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
	  methods:{
		  	//跳转页面
		  openinfo(url) {
		  
		  	//var newsid = e.currentTarget.dataset.newsid ;    
		  	uni.navigateTo({
		  		url: url,
		  		success: res => {},
		  		fail: () => {},
		  		complete: () => {}
		  	});
		  }
	  }
	}
</script>

<style>
.destLbg{
	width: 100%;
	height: 550rpx;
	position: relative;
}
.destLbg image{
	width: 100%;
	height: 550rpx;
}
.destLbg .intr{
	position: absolute;
	bottom: 50rpx;
	left: 30rpx;
	color: #fff;
}
.destLbg .intr .name{
	font-size: 46rpx;
	font-weight: bold;
}
.destLbg .intr .area{
	display: flex;
	justify-content: space-around;
	margin-top: 16rpx;
}
.destLbg .intr .area .iconfont{
	margin-right: 6rpx;
}
.destLbg .intr .plan{
	border-right: 4rpx solid #fff;
	padding: 0 16rpx;
	font-size: 26rpx;
}
.destLbg .intr .play{
	padding: 0 16rpx;
	font-size: 26rpx;
}
.reTitle{
	width: 100%;
	padding: 40rpx;
	box-sizing: border-box;
	font-size: 40rpx;
}
.reList{
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.reList .reBox{
	width: 48%;
	margin-bottom: 20rpx;
	position: relative;
	
}
.reList .reBox:nth-child(2n){
	margin-left: 4%;
}
.reList .reBox image{
	width: 100%;
	height:210rpx;
	border-radius: 8rpx;
}
.reList .reBox .intro{
	width: 100%;
	font-size: 30rpx;
	height: 50rpx;
	line-height: 50rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
.reList .reBox .pos{
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0,0,0,0.4);
	color: #fff;
	padding: 8rpx 10rpx;
	font-size: 24rpx;
	line-height: normal;
}	
</style>
